<!DOCTYPE html>
<title>Tests CSS animation of anchor(), IACVT behavior</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #cb {
    border: 1px solid black;
    width: 400px;
    height: 400px;
    position: relative;
  }
  #anchored {
    width: 50px;
    height: 50px;
    background: skyblue;
    animation: --anim 9999s linear;
    position: absolute;
    top: 42px; /* This should be overwritten by the anim. effect value. */
  }
  @keyframes --anim {
    from { top: anchor(--unknown top); }
    to { top: anchor(--unknown bottom); }
  }
</style>
<div id=cb>
  <div id=anchored></div>
</div>
<script>
  test(() => {
    assert_equals(anchored.offsetTop, 0); // auto
  }, 'Animation of invalid anchor() with no fallback');
</script>
